<template>
  <view class = "my-container">
    <!-- 顶部用户信息区域 -->
    <view class = "head">
      <view class = "background">
        <image :src = "`${BASE_URL}/mine/tree.png`" class = "decoration tree" mode = "aspectFit"></image>
        <image :src = "`${BASE_URL}/mine/moutain.png`" class = "decoration moutain" mode = "aspectFit"></image>
      </view>
      <view class = "user-info-section">
        <view class = "user-avatar">
          <image :src = "`${BASE_URL}/mine/女.png`" class = "avatar-image"></image>
        </view>
        <text class = "user-name">小新</text>
        <view class = "stats">
          <view class = "user-meta">
            <view class = "level-badge">
              <image :src = "`${BASE_URL}/mine/lv.png`" style = "height: 100rpx; width: 110rpx;"></image>
            </view>
            <view class = "points" @click = "points">
              <image :src = "`${BASE_URL}/mine/money.svg`" style = "height: 45rpx; width: 45rpx; top: 2px;"></image>
              <text class = "points-number"> 120</text>
              <view>
                <text class = "points-label"> 总 积 分</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 列表菜单区域 -->
    <view class = "menu-section">
      <view v-for = "menu in menuList" :key = "menu.id" class = "menu-item" @click = "navigateTo(menu.path)">
        <view class = "menu-icon">
          <image :src = "menu.icon" mode = "aspectFit" style = "width: 80rpx; height: 80rpx;"></image>
        </view>
        <view class = "menu-title">{{ menu.title }}</view>
        <view class = "menu-arrow">></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref} from 'vue';
import {BASE_URL} from "../../utils/api";

function points() {
  uni.navigateTo({
    url: '/pages/mine/integral/integral', success: (res) => {
      console.log("跳转成功");
    }, fail: (err) => {
      console.error("跳转失败", err);
    }
  });
}

// 菜单列表
const menuList = ref([
  {  id: 1, title: '我的收藏', icon: `${BASE_URL}/mine/collection.svg`, path: '/pages/mine/collection/collection'},
  {  id: 2, title: '关卡解锁', icon: `${BASE_URL}/mine/key.svg`, path: '/pages/mine/levels/levels'},
  // {  id: 3, title: '个人设置', icon: `${BASE_URL}/mine/IDcard.svg`, path: '/pages/mine/settings/settings'},
  {  id: 4, title: '积分中心', icon: `${BASE_URL}/mine/integral.svg`, path: '/pages/mine/integral/integral'},
  {  id: 5, title: '旅游日志', icon: `${BASE_URL}/mine/diary.svg`, path: '/pages/mine/diary/diary'},
  {  id: 6, title: '龙川有礼', icon: `${BASE_URL}/mine/shopping.svg`, path: '/pages/mine/shopping/shopping'}
]);

// 导航方法
const navigateTo = (path) => {
  console.log('跳转路径:', path); // 打印路径
  uni.navigateTo({
    url: path, success: () => console.log('跳转成功:', path), fail: (err) => console.error('跳转失败:', err)
  });
};
</script>

<style lang = "scss" scoped>
.my-container {
  width: 100%;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  background-color: #d6e0bd;
  background: linear-gradient(135deg, #d6e0bd 0%, #e1edc7 100%);
  position: relative;
  overflow: hidden;
}

.head {
  position: relative;
  padding-top: 180rpx;
  padding-bottom: 10rpx;
  flex: 1;

  .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;

    .decoration {
      position: absolute;
      opacity: 0.6;
      z-index: 1;

      &.tree {
        left: 30rpx;
        width: 150rpx;
        top: 30rpx;
      }

      &.moutain {
        left: 365rpx;
        width: 450rpx;
        height: 55%;
        top: 20rpx;
      }
    }
  }

  .user-info-section {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;

    .user-avatar {
      width: 258rpx;
      height: 258rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: rgb(119, 153, 84);
      border-radius: 50%;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
    }

    .avatar-image {
      width: 250rpx;
      height: 250rpx;
      border-radius: 50%;
    }

    .user-name {
      margin-top: 20rpx;
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
      align-items: center;
    }

    .user-id {
      font-size: 24rpx;
      color: #999;
    }

    .user-meta {
      display: flex;
      gap: 150rpx;
      margin-top: 20rpx;
    }

    .level-badge,
    .points {
      position: relative;
      align-items: flex-start;
      border-radius: 100rpx;
      flex-direction: column;
      align-items: center;
    }

    .points {
      .points-number {
        font-size: 37rpx;
        font-weight: bold;
        margin-bottom: 5rpx;
      }

      .points-label {
        width: 100%;
        font-size: 33rpx;
        font-weight: bold;
      }
    }
  }
}

.menu-section {
  background-color: #fff;
  margin-top: 45rpx;
  border-radius: 30rpx 30rpx 0 0;
  flex-grow: 1;
  overflow: hidden;
  flex: 1.5;

  .menu-item {
    display: flex;
    align-items: center;
    flex: 0.8;

    padding: 20rpx;
    border-bottom: 1px solid #eee;
    height: calc(100% / 5);
    box-sizing: border-box;

    &:last-child {
      border-bottom: none;
    }

    .menu-icon {
      margin-right: 20rpx;
    }

    .menu-title {
      flex: 1;
      font-size: 32rpx;
      color: #333;
    }

    .menu-arrow {
      color: #ccc;
      font-size: 36rpx;
    }
  }
}
</style>